<template>
<h3>电影检索框</h3>
    <table class="moviesListSelect">
        <tr>
            <td><input type="text" placeholder="请输入电影名称" v-model="selectByTerm.movieName"></td>
            <td><select name="" v-model="selectByTerm.movieCountry" >
                    <option :value="item.name" v-for="item in countries" :key="item._id">{{ item.name }}</option>
                </select></td>
            <td> <select name="" v-model="selectByTerm.movieType" >
                    <option :value="item.name" v-for="item in moviesType" :key="item._id">{{ item.name }}</option>
                </select></td>
            <td><button @click="$emit('changeMoviesData','[...selectResult]')">搜索</button></td>
        </tr>
    </table>
</template>

<script setup>
defineProps(["countries","moviesType",'selectByTerm',"selectResult"])
</script>

<style scoped>
.moviesListSelect {
    border-collapse: collapse;
    font-size: 14px;
}

.moviesListSelect>tr>td:not(:last-child) {
    border: 1px solid;

}

.moviesListSelect input {
    width: 140px;
    border: none;
    outline: none;

}

.moviesListSelect select {
    width: 80px;
    border: none;
    outline: none;

}   
</style>